<template>
    <div class="wrap">
        <div id="container">
            <!-- 定义一个表格元素 -->
            <!--<button id="redraw">更换数据源</button>-->
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5 class=""><span class="title">消息接收人管理</span><router-link class="btn btn-xs btn-toList"  :to="'/msg/receiveConf/'"> 返回消息接收人管理</router-link></h5>
                    <div class="stayRight ">
                        <el-button type="primary" @click="showMonitor()">新增消息接收人</el-button>
                    </div>
                </div>
            </section>
            <section class="tableMain">
                <el-table :data="dataArr" border style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="name" label="姓名" > </el-table-column>
                    <el-table-column prop="email" label="邮箱" > </el-table-column>
                    <el-table-column prop="phone" label="手机" > </el-table-column>
                    <el-table-column prop="remark" label="备注" > </el-table-column>
                    <el-table-column label="操作">
                        <template scope="scope">
                            <el-button  v-if="scope.row.tag===undefined" size="small"  type="text"   @click="showMonitor(scope.$index, dataArr)">修改</el-button>
                            	<span v-if="scope.row.tag===undefined">|</span>
                            <el-button  v-if="scope.row.tag===undefined" size="small"  type="text"   @click="delReceiver(scope.$index, dataArr)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </section>


            <el-dialog :title="monitorTitle" :visible.sync="creatDialogVislble" class="customDialog team" :lock-scroll="false">
                <!-- <h4 class="dialogtitle">新增消息接收人</h4> -->
                <div class="scoreContainer tagCategory">
                    <el-form :model="receiverForm" :rules="rules" ref="receiverForm" label-width="120px" class="demo-receiverForm">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="receiverForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="receiverForm.email"></el-input>
                        </el-form-item>
                        <el-form-item label="手机" prop="phone">
                            <el-input v-model="receiverForm.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea" v-model="receiverForm.remark"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="creatDialogVislble = false">取 消</el-button>
                    <el-button type="primary" @click="createSubmit('receiverForm')">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { receiverList, modifyReceiver, delReceiver } from '@/api/msgCenterData'
export default {
  data() {
    var emailValidate = (rule, value, callback) => {
      var emailReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/
      if (value === '') {
        callback(new Error('请输入邮箱'))
      } else if (!emailReg.test(value)) {
        callback(new Error('请输入正确格式的邮箱'))
      } else {
        callback()
      }
    }
    var phoneValidate = (rule, value, callback) => {
      var phoneReg = /^1[34578]\d{9}$/
      if (value === '') {
        callback(new Error('请输入手机号码'))
      } else if (!phoneReg.test(value)) {
        callback(new Error('请输入正确格式的手机号码'))
      } else {
        callback()
      }
    }
    return {
      dataArr: null,
      monitorTitle: '',
      listLoading: true,
      pdisabled: true,
      creatDialogVislble: false,
      multipleSelection: [],
      receiverForm: {
        id: '',
        name: '',
        email: '',
        phone: '',
        remark: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        email: [
          { validator: emailValidate, required: true, trigger: 'blur' }
        ],
        phone: [
          { validator: phoneValidate, required: true, trigger: 'blur' }
        ],
        remark: [
          { required: false, message: '请输入备注', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.receiverList()
  },
  methods: {
    receiverList() {
      var listQuery = { }
      receiverList(listQuery).then(response => {
        this.dataArr = response.data.data
      })
    },
    showMonitor(index, data) {
      this.creatDialogVislble = true
      if (data !== undefined) {
        this.monitorTitle = '修改'
        this.receiverForm = {
          id: data[index].id,
          name: data[index].name,
          email: data[index].email,
          phone: data[index].phone,
          remark: data[index].remark
        }
      } else {
        this.monitorTitle = '新增消息接收人'
        this.receiverForm = {
          name: '',
          email: '',
          phone: '',
          remark: ''
        }
      }
    },
    createSubmit(formName) {
      console.log(this.$refs[formName])
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var tip = '确认新增接收人？'
          if (this.receiverForm.id !== undefined) {
            tip = '确认修改？'
          }
          this.$confirm(tip, '提示', {
            type: 'warning'
          })
          .then(_ => {
            modifyReceiver(this.receiverForm).then(response => {
              this.dataArr = response.data.data
              this.creatDialogVislble = false
              this.receiverList()
              this.$message({
                message: '操作成功!',
                type: 'success'
              })
            })
          })
        .catch(_ => {})
        }
      })
    },
    delReceiver(index, data) {
      const sel = {
        id: data[index].id
      }
      this.$confirm('此操作将删除该数据, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delReceiver(sel).then(response => {
          var rp = response.data
          if (rp.code === 2) {
            this.$alert(rp.msg, '删除失败', {
              confirmButtonText: '确定',
              callback: action => {}
            })
          } else {
            this.receiverList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
      }).catch(() => {
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length > 0) {
        this.pdisabled = false
      } else {
        this.pdisabled = true
      }
      console.log(this.multipleSelection, 'multipleSelection')
    }
  }
}
</script>

<style lang="scss">
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 8px;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
            .title{padding: 0 10px;}
            .btn-xs{
                font-size: 12px;
                padding: 2px 8px;
                height: 20px;
                line-height: 14px;
            }
        }
        .stayRight{
            position: absolute;
            top: 15px;
            right: 0;
            overflow: hidden;
        }
    }
}
.tableMain{
    padding: 10px;
}

.btn-toList{
  border: 1px solid #BBB;
  color: #666;
  text-shadow: none;
  vertical-align: middle;
  margin-top: 7px;
}

</style>


